<template>
    <div class="login">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item>
                <a href="#/register">还没有账号？立即注册!</a>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

const ruleForm = reactive({
    email: '2110410005@qq.com',
    password: 'liu129499'
})

const rules = reactive({
    email: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' }
    ],
    password: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' }
    ],
})

const submitForm = async () => {
    await store.dispatch('login', ruleForm)
    router.push('/')
    setTimeout(() => {
        window.location.reload()  // 刷新页面
    }, 1000)
}


</script>
<style lang="scss" scoped>
.login {
    width: 400px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -100px;
}
</style>